// 根据设计稿修改最大宽度
@media screen and (min-width:1200px) {
    .container {
        width: 1280px;
    }
}

// 小屏幕和超小屏幕导航栏浮动   
@media screen and (max-width:991px) {
    .nav li {
        float: left;
        width: 20%;
    }
    article {
        margin-top: 10px;
    }
    //news第一个li宽度100%,剩下的小li各50%
    .news li:nth-child(1) {
        width: 100%!important;
    }
    .news li {
        width: 50%;
    }
}
//超小屏幕修改字体大小
@media screen and (max-width:767px) {
    .container .nav li a {
        font-size: 14px;
        padding-left: 15px;
    }
    .publish h3 {
        font-size: 17px;
    }
    .publish p {
        font-size: 12px;
    }
}
body {
    background-color: #f5f5f5;
}
.container {
    background-color: #fff;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    &:hover {
        text-decoration: none;
    }
}
// 头部
header {
    padding-left: 0!important;
    .logo {
        background-color: #429ad9;
    }
    img {
        // width: 100%;
        // 响应式--修改图片使得不缩放
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    //响应式--超小屏幕下，隐藏logo，显示span
    span {
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        text-align: center;
    }

    .nav {
        background-color: #eee;
        border-bottom: 1px solid #ccc;
        a {
            display: block;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
            font-size: 16px;
        }
        a:hover {
            background-color: #fff;
        }
        a::before {
            vertical-align: middle;
            padding-right: 5px;
        }
    }
}

//中间
article {
    .news li  {
        float: left;
        width: 25%;
        height: 128px;
        padding-right: 10px;
        margin-bottom: 10px;
        a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .news li:nth-child(1) {
        height: 266px;
        width: 50%;
        p {
            line-height: 41px;
            font-size: 20px;
            padding: 0 10px;
        }
    }
    .news img {
        height: 100%;
        width: 100%;
    }
    .news p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 41px;
        padding: 5px 10px;
        margin-bottom: 0;
        background: rgba(0, 0, 0, .5);
        font-size: 12px;
        color: #fff;
    }
    .publish {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        .pic {
            margin-top: 10px;
            img {
                width: 100%;
            }
        }
    }
}

//侧边
aside {
    .banner img {
        width: 100%;
    }
    .hot {
        display: block;
        margin-top: 20px;
        padding: 0 20px 20px;
        border: 1px solid #ccc;
        span {
            border-radius: 0;
            margin-bottom: 20px;
        }
        p {
            font-size: 12px;
        }
    }
}